<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/template.css"/>
		<title>头部和底部</title>
	</head>
	<body>
		<div class="web">
			<!--头部-->
			<header>
				<div id="catalog">
					<i class="iconfont icon-mulu"></i>
				</div>
				<div id="search">
					<i class="iconfont icon-fangdajing1"></i>
				</div>
				<div class="logo">
					<img src="img/logo.jpg"/>
				</div>
			</header>
			<!--中间内容-->
			<section>
				
			</section>
			<!--尾部-->
			<footer>
				<div class="foot_img">
					<img src="img/foot_img_02.jpg"/>
				</div>
				<div class="foot">
					<div class="foot_cont">
						<div class="foot_sign">
							<p>Receive the latest Or news and Creativity in our newsletters.</p>
							<form action="" method="get">
								<a href="#">Sign Up</a>
								<input type="text" placeholder="Enter your email address" class="footsearch_input"/>
							</form>
						</div>
						<div class="share">
							<a href="#"><i class="iconfont icon-weibo1"></i></a>
							<a href="#"><i class="iconfont icon-xingzhuang"></i></a>
							<a href="#"><i class="iconfont icon-baidu"></i></a>
							<a href="#"><i class="iconfont icon-ins"></i></a>
							<a href="#"><img src="img/top_03.png"/></a>
						</div>
					</div>
				</div>
			</footer>
		</div>
		<!--目录-->
		<div id="catalog_page_id">
			<div class="catalog_cont">
				<div id="catalog_page_close">
					<i class="iconfont icon-guanbi"></i>
				</div>
				<div class="catalog_share">
					<a href="#"><i class="iconfont icon-weibo1"></i></a>
					<a href="#"><i class="iconfont icon-xingzhuang"></i></a>
					<a href="#"><i class="iconfont icon-baidu"></i></a>
					<a href="#"><i class="iconfont icon-ins"></i></a>
				</div>
				<div class="catalog_list">
					<ul>
						<li><a href="#">About Or</a></li>
						<li><a href="#">Product</a></li>
						<li><a href="#">Space Inspiration</a></li>
						<li><a href="#">User Experience</a></li>
					</ul>
				</div>
				<div class="catalog_across">
					<i class="iconfont icon-hengxian1"></i>
					<a href="#">NEWS</a>
					<i class="iconfont icon-hengxian1"></i>
					<a href="#">EVENT</a>
					<i class="iconfont icon-hengxian1"></i>
					<a href="#">CONTACT</a>
					<i class="iconfont icon-hengxian1"></i>
				</div>
			</div>
		</div>
		<!--搜索-->
		<div id="search_page_id">
			<div class="search_cont">
				<div id="return">
					<i class="iconfont icon-jiantou"></i>
					<span>return</span>
				</div>
				<div class="search_form">
					<form action="" method="get">
						<input type="text" name="" id="search_input" value="" autofocus/>
					</form>
					<p>Searh anything &amp; hit enter</p>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/rem.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
	</body>
</html>
